<template>
    <div>
        <button @click="show1=true">我来看看老爸和我说了什么</button>
        <p v-show="show1">爸爸说：{{ toSon }}</p>
        <button @click="show2=true">看看这次考试考的怎么样</button>
        <p v-show="show2">你的考试成绩如下：
            <ul>
            <li v-for="item in props.grades">第{{ item.id }}几次考了{{ item.grade }}分</li>
        </ul>
    </p>
    <button @click="show3=true">看看老爸又和我说了什么</button>
    <p v-show="show3">爸爸生气的说{{msg}} </p>
        
    </div>
</template>

<script setup>
    import {ref} from "vue"
    const show1 = ref(false)
    const show2 = ref(false)
    const show3 = ref(false)
    //1.隐式的接受父组件的传值
    //defineProps(["toSon"])
    //2.显示的接受父组件的数组数据(接受数据可以分为显示和隐式)
    //const props = defineProps(['grades'])
    //3.可以采用对象的形式接受数据:String,Number,Boolean,Array,Object
    const props = defineProps({
        toSon:String,
        grades:Array,
        msg:String
    })
    //也可以这样隐式或显示接受数据 defineProps(['toSon','grades'])
</script>